<template>
  <view>
    <u-sticky>
      <view>
        <view class="bgWhite">
          <view>
            <view class="searchBOx u-flex u-p-l-20"> <u-icon name="search" color="#aaaaaa"></u-icon>
              <text class="u-p-l-10">搜索我的订单</text>
            </view>
          </view>
          <up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" :inactiveStyle="{
		      	           fontWeight: '400',
		      	           fontSize: '28rpx',
		      	           lineHeight:2.5,
		      	           color: '#5C5C5C',
		      	         }" :activeStyle="{
		      	           fontWeight: '600',
		      	           fontSize: '28rpx',
		      	           lineHeight:2.5,
		      	           color: '#202020',
		      	         }" :lineHeight="5" lineColor="#00C1B9">
          </up-tabs>
        </view>
      </view>
    </u-sticky>
    <view class="pages">
      <view class="card" v-for="(item,index) in list" :key="index" @click="navigateTo(`/pages-users/order/orderDetail?status=${item.status}`)">
        <view class="  u-p-b-20 u-flex u-border-bottom">
          <view class="u-flex-1 text">订单号：4424454542445444</view>
          <view></view>
        </view>

        <view class="rightTop " :class="item.status==1?'status1':'status2'"></view>
        <view class="status status1" v-if="item.status==1">问诊中</view>
        <view class="status status2" v-if="item.status==2">退款</view>
        <view class="status status2"  v-if="item.status==3" >已完成</view>
        <view class=" u-p-t-20 u-flex">
          <image src="https://ossresource.miyingbl.com/def/c0c17202406251553104065.png" mode="" class="icon"></image>
          <view class="text">患者：</view>
          <view class="text1">xxx</view>
        </view>
        <view class="u-p-t-20 u-flex">
          <image src="https://ossresource.miyingbl.com/def/877d020240625162532472.png" mode="" class="icon"></image>
          <view class="text">主诉：</view>
          <view class="text1 line1 u-flex-1"> 最近一直咳嗽，谁也睡不着，吃了药也不管用,不知道 </view>
        </view>
        <view class="u-p-t-20 u-flex">
          <image src="https://ossresource.miyingbl.com/def/6a338202406251626167896.png" mode="" class="icon"></image>
          <view class="text">服务类型：</view>
          <view class="text1">图文问诊</view>
        </view>
        <view class="u-p-t-20 u-p-b-20 u-flex u-border-bottom">
          <image src="https://ossresource.miyingbl.com/def/37194202406251624075828.png" mode="" class="icon"></image>
          <view class="text">问诊时间：</view>
          <view class="text1">2024-04-23 23:25:23</view>
        </view>
        <view class="u-p-t-20 u-flex u-row-right">

          <view class="u-flex-1 u-flex u-flex-items-end">
             <view class="text">订单金额：</view>
            ￥<text class="price">199.00</text>
          </view>
          <view class="u-flex u-row-right">
            <view class="btns" @click="navigateTo()">查看问诊历史</view>
            <view class="btns" @click.stop="toInterrogation()">发起问诊</view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from "vue"
  import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
  import {
    navigateTo,
    showToast,
    navigateBack
  } from '@/utils'
  const currentTab = ref(0)
  const tablist = ref([{
      name: '全部',
      id: 0
    }, {
      name: '问诊中',
      id: 1
    },
    {
      name: '已完成',
      id: 2
    },
    {
      name: '退款',
      id: 3
    }
  ])
  const cateIndex = ref(0)
  const cateList = ref([{
      name: '爱护牙齿',
      id: 0
    }, {
      name: '养生调理',
      id: 2
    },
    {
      name: '女性呵护',
      id: 1
    }
  ])

  const params = ref({
    page: 1,
    limit: 15
  })
  // 切换顶部tab
  const onTabClick = (e) => {
    console.log(e)
    currentTab.value = e.id
    articelList.value = []
    params.value.type = e.id
    cateIndex.value = 0
    params.value.page = 1
    getList()
  }
  const onCateClick = (index, id) => {
    articelList.value = []
    cateIndex.value = index
    params.value.page = 1
    getList()
  }

  const list = ref([{
    status: 1
  }, {
    status: 3
  }, {
    status: 2
  }])
  //问诊
  function toInterrogation() {
    navigateTo('/pregnancys/index/doctor-chat')
    if (isInterrogation.value) {
      // navigateTo(
      //   `/pregnancys/index/doctor-chat?uid=${detailsInfo?.value?.uid}&avatar=${detailsInfo?.value?.avatar}&name=${detailsInfo?.value?.name}`,
      // )
    } else {
      return false
    }
  }
</script>

<style>
  page {
    background: #F5F6F8;
  }
</style>
<style lang="scss" scoped>
  .bgWhite {
    background-color: #fff;
  }

  .searchBOx {
    width: 702rpx;
    height: 70rpx;
    background: #F5F6F8;
    border-radius: 35rpx;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #AAAAAA;
  }

  .pages {
    padding: 24rpx;
  }

  .cateBox {
    padding: 20rpx 30rpx;

    .cateItem {
      width: 160rpx;
      height: 48rpx;
      line-height: 48rpx;
      // background: #F5F6F8;
      border-radius: 24rpx;
      font-size: 28rpx;
      color: #AAAAAA;
      text-align: center;
      margin-right: 20rpx;

      &.active {
        background: #00C1B9;
        border-radius: 24rpx;
        color: #fff;
      }
    }
  }

  .card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    position: relative;
    margin-bottom: 20rpx;

    .icon {
      width: 26rpx;
      height: 26rpx;
      display: block;
      margin-right: 15rpx;
    }

    .text {
      font-size: 26rpx;
      color: #5C5C5C;
    }

    .text1 {
      font-size: 26rpx;
      color: #202020;
    }
    .price{
      font-size: 36rpx;
      color: #202020;
    }
    .btns {
      border-radius: 30rpx;
      border: 1rpx solid #AAAAAA;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #5C5C5C;
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 10rpx;
    }

    .rightTop {
      position: absolute;
      width: 66rpx;
      height: 66rpx;
      top: 0;
      right: 0;
      border-radius: 0 20rpx 0 0;
      &.status1{
        background: linear-gradient(225deg, #8BCA64 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 1) 100%);
      }
      &.status2{
        background: linear-gradient(225deg, #CB5000 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 1) 100%);
      }
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;
      padding: 20rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
      &.status1 {
        color: #8BCA64;
        &::after{
          position: absolute;
          content: "";
          left: -7rpx;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 14rpx;
          height: 14rpx;
          background: #8BCA64;
          border-radius: 50%;
        }
      }

      &.status2 {
        color: #CB5000;
      }
    }
  }
</style>
